<template>
    <el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px"
             class="demo-ruleForm login-container">
    <span class="tool-bar">
      <!-- 主题切换 -->
      <theme-picker style="float:right;" class="theme-picker" :default="themeColor"
                    @onThemeChange="onThemeChange"></theme-picker>
    </span>
        <i class="el-icon-arrow-left" style="float: left;margin-top:9px;" @click="login"></i>
        <h2 class="title" style="padding-left:22px;">用户注册</h2>
        <el-form-item prop="account">
            <el-input type="text" v-model.trim="loginForm.account" auto-complete="off" placeholder="手机 / 邮箱号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input type="password" v-model.trim="loginForm.password" auto-complete="off" placeholder="密码"  @keyup.enter.native="regist" :loading="loading"></el-input>
        </el-form-item>
        <el-form-item style="width:100%;">
            <el-button type="primary" style="width:35%;" @click="reset">重 置</el-button>
            <el-button type="primary" style="width:35%;" @click="regist" :loading="loading">注 册</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
  import {mapState} from 'vuex'
  import ThemePicker from '@/components/ThemePicker'
  import {isMobile,isEmail} from '@/utils/validate'

  export default {
    name: 'Register',
    components: {
      ThemePicker
    },
    data () {
      return {
        loading: false,
        loginForm: {
          account: '',
          password: ''
        },
        fieldRules: {
          account: [
            {required: true, message: '请输入账号', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      // 切换主题
      onThemeChange: function (themeColor) {
        this.$store.commit('setThemeColor', themeColor)
      },
      login: function () {
        this.$router.push('/')
      },
      regist: function () {
        if (this.loginForm.account === ''
          || this.loginForm.password === ''
          || (!isMobile(this.loginForm.account)
          && !isEmail(this.loginForm.account))
        ) {
          this.$message.error('请输入正确的账号和密码')
          return
        }
        this.$api.login.register(this.loginForm).then((res) => {
          if (res.isSuccess && res.resultCode === 0) {
            this.$message.success('注册成功，请登录')
            this.$router.push('/login')
          } else {
            this.$message.warning(res.msg)
            this.$router.push('/register')
          }
        })
      },
      reset: function () {
        this.$refs.loginForm.resetFields()
      }
    },
    computed: {
      ...mapState({
        themeColor: state => state.app.themeColor
      })
    }
  }
</script>

<style lang="scss" scoped>
    .login-container {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 160px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;

        .title {
            margin: 0px auto 30px auto;
            text-align: center;
            color: #505458;
        }

        .remember {
            margin: 0px 0px 35px 0px;
        }
    }
</style>
